<template>
    <div class="edit">
        <!-- 主体 -->
        <div class="main">
            <p class="title">医生接诊分时段排班</p>
            <div class="box">
                <!-- 添加接诊医生  -->
                <Button type="primary" @click="addDoctr">
                    <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>添加排班医生
                </Button>
                <!-- 接诊医生显示 -->
                <div class="doctor" v-show='selectExpert.doctorName'>
                    <!-- 医院 -->
                    <span>{{ selectExpert.hospitalName }}</span>
                    <!-- 科室 -->
                    <span>{{ selectExpert.deptName }}</span>
                    <!-- 医生姓名 -->
                    <span>{{ selectExpert.doctorName }}</span>
                </div>
                <!-- 医生已开通服务 -->
                <div class = 'service' v-show='selectExpert.doctorName'>
                    <span>医生已开通服务：</span>
                    <div style='margin-right:8px;width:auto;' v-for='item in servericeList'>
                        <Card style="width:110px;">
                            <Checkbox v-model="item.flag">{{ item.menuName }}</Checkbox>
                        </Card>
                    </div>
                </div>
                <!-- 选择专家 -->
                <Modal v-model="modal1" title="选择专家" :footer-hide="true" width="800" :styles="{top: '20px'}">
                    <div class="modelExpert">
                        <div class="searchExpertList">
                            <input type="text" placeholder="输入医生姓名、医院、科室" style='width:230px;margin-right:10px;' v-model.trim="searchName">
                            <Button type="primary" icon="ios-search" @click="searchExpert">查询</Button>
                        </div>
                        <Table stripe :columns="columns" border :data="expertList"style='width:100%;'></Table>
                        <div class="total">
                            <Page :total="expertSize" :current="expertNo" @on-change="change1"/>
                        </div>
                    </div>
                </Modal>
                <div class="paiban">
                    <span>排班模式：</span>
                    <RadioGroup v-model="timeType" @on-change='changetimeType'>
                        <Radio :label="1">普通设置</Radio>
                        <Radio :label="2">分时段设置</Radio>
                    </RadioGroup>
                </div>
                <!-- 列表 -->
                <div class="table">
                    <p>设置接诊数量</p>
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>时间</td>
                            <td>预约时间段</td>
                            <td>星期一</td>
                            <td>星期二</td>
                            <td>星期三</td>
                            <td>星期四</td>
                            <td>星期五</td>
                            <td>星期六</td>
                            <td>星期日</td>
                            <td></td>
                        </tr>
                        <tr v-for="(item,index) of upList" :key="index">
                            <td v-if="index+1 == 1">
                               <button class="cus-btn" @click="upAdItem" size="small">+</button>&nbsp;上午
                            </td>
                            <td v-else>&nbsp;</td>
                            <td>
                                <TimePicker
                                    :open="item[8]"
                                    :value="item[0]"
                                    format="HH:mm"
                                    type="timerange"
                                    :steps="[1,5]"
                                    :clearable="false"
                                    :confirm="true"
                                    :editable="false"
                                    :disabled-hours="[0,1,2,3,4,5,6,7,13,14,15,16,17,18,19,20,21,22,23,24]"
                                    @on-change="changeUpTime($event,index)"
                                    @on-ok="upOk(index)"
                                    placement="bottom-end"
                                    placeholder="时间段"
                                    style="width: 120px"
                                >
                                  <a href="javascript:void(0)" @click="upClick($event,index)">
                                    <Icon type="ios-clock-outline"></Icon>
                                    <template v-if="item[0][0] === '' || item[0][1] === ''">选择时间段</template>
                                    <template v-else>{{ item[0][0]+'-'+item[0][1] }}</template>
                                  </a>
                                </TimePicker> 
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="item[1]"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="item[2]"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="item[3]"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="item[4]"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="item[5]"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="item[6]"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="item[7]"></InputNumber>
                            </td>
                            <td>
                              <button
                                v-if="index==upList.length-1 && upList.length!=1"
                                @click="rmUpItem"
                                class="cus-btn"
                                size="small"
                              >-</button>
                            </td>
                        </tr>
                        <tr v-for="(item,index) of dnList" :key="index">
                            <td v-if="index+1 == 1">
                              <button class="cus-btn" @click="dnAdItem" size="small">+</button>&nbsp;下午
                            </td>
                            <td v-else>&nbsp;</td>
                            <td>
                                <TimePicker
                                      :open="item[8]"
                                      :value="item[0]"
                                      format="HH:mm"
                                      type="timerange"
                                      :steps="[1,5]"
                                      :clearable="false"
                                      :confirm="true"
                                      :editable="false"
                                      :disabled-hours="[0,1,2,3,4,5,6,7,8,9,10,11,12,18,19,20,21,22,23,24]"
                                      @on-change="changeDnTime($event,index)"
                                      @on-ok="dnOk(index)"
                                      placement="bottom-end"
                                      placeholder="时间段"
                                      style="width: 120px"
                                >
                                  <a href="javascript:void(0)" @click="dnClick($event,index)">
                                    <Icon type="ios-clock-outline"></Icon>
                                    <template v-if="item[0][0] === '' || item[0][1] === ''">选择时间段</template>
                                    <template v-else>{{ item[0][0]+'-'+item[0][1] }}</template>
                                  </a>
                                </TimePicker>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="item[1]"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="item[2]"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="item[3]"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="item[4]"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="item[5]"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="item[6]"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="item[7]"></InputNumber>
                            </td>
                            <td>
                                <button
                                  v-if="index==dnList.length-1 && dnList.length!=1"
                                  @click="rmDnItem"
                                  class="cus-btn"
                                  size="small"
                                >-</button>
                            </td>
                        </tr>
                        <tr v-for="(item,index) of tnList" :key="index">
                            <td v-if="index+1 == 1">
                              <button class="cus-btn" @click="tnAdItem" size="small">+</button>&nbsp;晚上
                            </td>
                            <td v-else>&nbsp;</td>
                            <td>
                                <TimePicker
                                      :open="item[8]"
                                      :value="item[0]"
                                      format="HH:mm"
                                      type="timerange"
                                      :steps="[1,5]"
                                      :clearable="false"
                                      :confirm="true"
                                      :editable="false"
                                      :disabled-hours="[0,1,2,3,4,5,6,7,8,9,10,11,12,18,19,20,21,22,23,24]"
                                      @on-change="changeTnTime($event,index)"
                                      @on-ok="tnOk(index)"
                                      placement="bottom-end"
                                      placeholder="时间段"
                                      style="width: 120px"
                                >
                                  <a href="javascript:void(0)" @click="tnClick($event,index)">
                                    <Icon type="ios-clock-outline"></Icon>
                                    <template v-if="item[0][0] === '' || item[0][1] === ''">选择时间段</template>
                                    <template v-else>{{ item[0][0]+'-'+item[0][1] }}</template>
                                  </a>
                                </TimePicker>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="item[1]"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="item[2]"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="item[3]"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="item[4]"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="item[5]"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="item[6]"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="item[7]"></InputNumber>
                            </td>
                            <td>
                                <button
                                  v-if="index==tnList.length-1 && tnList.length!=1"
                                  @click="rmTnItem"
                                  class="cus-btn"
                                  size="small"
                                >-</button>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="inputnum">
                    <span>预约期限：</span>
                    <InputNumber v-model.trim="term" :max="99" :min="0" placeholder="请输入预约期限"></InputNumber>
                </div>
                <!-- 预约备注 -->
                <div class="text">
                    <span>预约备注：</span>
                    <Input v-model.trim="text_info" type="textarea" maxlength="80" :rows="4" placeholder="请输入备注"/>
                </div>
            </div>                      
        </div>
        <!-- 保存 -->
        <div class="save">
            <Button type="primary" @click="save" :loading="submitLoading">
                <Icon type="ios-checkmark" style="margin-right: 5px" />保存
            </Button>
            <Button @click="back">
                <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
            </Button>
        </div>
    </div>
</template>
<script>
import tempHeader from "@/components/tmpHeader";
import { TimePicker } from "view-design";
import api from "@/api/commonApi";
import { Card } from 'view-design'
export default {
    components: {
        tempHeader,
        TimePicker,
        Card
    },
    data() {
        return {
            province: null,
            city: null,
            area: null,
            hospital: null,
            isBack: 2,

            topLength: 9999,
            botLength: 9999,
            NightLength: 9999,
            switch1: true,
            text_info: "",
            term: "",
            // 添加专家model
            modal1: false,
            expertNo: 1,
            expertSize: 10,
            timeType: 2,
            // 医院ID
            id: '',
            selectExpert: {},
            expertList: [],
            // 医生表头信息
            columns:[
                {
                    title:"医院名称",
                    key:"hospitalName",
                    align:"center"
                },
                {
                    title:"科室名称",
                    key:"deptName",
                    align:"center"
                },
                {
                    title:"医生名称",
                    key:"doctorName",
                    align:"center"
                },
                {
                    title:"职称",
                    key:"title",
                    align:"center"
                },
                {
                    title:"选择",
                    align:"center",
                    render:(h,params) =>{
                        let row = params.row;
                        
                        return [
                            h('a',{
                                on:{
                                    click: () => {
                                        this.expert(row)
                                    }
                                }
                            },"选择")
                        ]
                    }
                }
            ],
            searchName: "",
            // 班外时间可接诊
            classTime: true,
            // 班内时间
            inClassTime: true,

            single: true,
            // 医生服务列表
            servericeList: [],
            submitLoading: false,
            upList: [
              [["08:00", "09:00"], null, null, null, null, null, null, null, false],
              [["09:00", "10:00"], null, null, null, null, null, null, null, false],
              [["10:00", "11:00"], null, null, null, null, null, null, null, false],
              [["11:00", "12:00"], null, null, null, null, null, null, null, false]
            ],
            dnList: [
              [["13:00", "14:00"], null, null, null, null, null, null, null, false],
              [["14:00", "15:00"], null, null, null, null, null, null, null, false],
              [["15:00", "16:00"], null, null, null, null, null, null, null, false],
              [["16:00", "17:00"], null, null, null, null, null, null, null, false]
            ],
            tnList: [
              [["18:00", "19:00"], null, null, null, null, null, null, null, false],
              [["19:00", "20:00"], null, null, null, null, null, null, null, false],
              [["20:00", "21:00"], null, null, null, null, null, null, null, false],
            ],
            open: false,
        };
    },
    created() {
        this.province = this.$route.query.province?parseInt(this.$route.query.province):null;
        this.city = this.$route.query.city?parseInt(this.$route.query.city):null;
        this.area = this.$route.query.area?parseInt(this.$route.query.area):null;
        this.hospital = this.$route.query.hospital?this.$route.query.hospital:null;
        this.selectExpert.hospitalName = this.$route.query.hospitalName?this.$route.query.hospitalName:null;
        this.selectExpert.hospitalId = this.$route.query.hospitalId?this.$route.query.hospitalId:null;
        this.selectExpert.deptName = this.$route.query.deptName?this.$route.query.deptName:null;
        this.selectExpert.deptType = this.$route.query.deptType?this.$route.query.deptType:null;
        this.selectExpert.doctorName = this.$route.query.doctorName?this.$route.query.doctorName:null;
        this.selectExpert.doctorId = this.$route.query.doctorId?this.$route.query.doctorId:null;
        this.term = this.$route.query.term?this.$route.query.term:null;
        this.text_info = this.$route.query.remarks?this.$route.query.remarks:null;
        this.timeType = this.$route.query.timeType?this.$route.query.timeType:2;
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/operation/doctorManagement/index",
                title: "医生端运营"
            },
            {
                path: "/index/operation/interScheduling",
                title: "互联网排班"
            }
        ];
        this.$emit("changeBreadList", breadList);
        window.document.body.addEventListener("click", this.closeTimePicker);
    },
    methods: {
        // 加载弹窗并请求医生接口
        addDoctr() {
            this.searchExpert();
            this.modal1 = true;
        },
        //  取消,后退 上一次
        back() {
            let pageNo = this.$route.query.pageNo;
            // function全局方法
            this.functionJS.queryNavgationTo(
                this,
                "/index/doctorOperation/InterScheduling/list",
                {
                    pageNo,
                    province: this.province,
                    city: this.city,
                    area: this.area,
                    hospital: this.hospital,
                    isBack: 2
                }
            );
        },
        // 模态框的分页器改变
        change1(index) {
            this.expertNo = index;
            this.searchExpert();
        },
        // 保存/新增专家
        save() {
            // 医生服务
            let typeList = []
            this.servericeList.forEach(item =>{
                if(item.flag) {
                    typeList.push(item.serviceType)
                }
            })
            // 号源
            let timsList = []
            this.upList.map((el, i) => {
              for (let i = 1; i <= 7; i++) {
                if (el[i] != "" && el[i] > 0) {
                    let tmpObj = {};
                    tmpObj.timeStart = el[0][0];
                    tmpObj.timeEnd = el[0][1];
                    tmpObj.num = el[i];
                    tmpObj.day = 1;
                    tmpObj.week = i;
                    tmpRegistertimes.push(tmpObj);
                }
              }
            });
            this.dnList.map((el, i) => {
              for (let i = 1; i <= 7; i++) {
                if (el[i] != "" && el[i] > 0) {
                    let tmpObj = {};
                    tmpObj.timeStart = el[0][0];
                    tmpObj.timeEnd = el[0][1];
                    tmpObj.num = el[i];
                    tmpObj.day = 2;
                    tmpObj.week = i;
                    tmpRegistertimes.push(tmpObj);
                }
              }
            });
            this.tnList.map((el, i) => {
              for (let i = 1; i <= 7; i++) {
                if (el[i] != "" && el[i] > 0) {
                    let tmpObj = {};
                    tmpObj.timeStart = el[0][0];
                    tmpObj.timeEnd = el[0][1];
                    tmpObj.num = el[i];
                    tmpObj.day = 2;
                    tmpObj.week = i;
                    tmpRegistertimes.push(tmpObj);
                }
              }
            });
            if (timsList.length <= 0) {
                flag = false;
                this.$Message.error({
                content: "请至少有一个号源有号再保存，谢谢",
                duration: 5
                });
                return false;
            }
            let params = {
                "areaCode": this.area,
                "cityCode": this.city,
                "provinceCode": this.province,
                "doctorId": this.selectExpert.doctorId,
                "doctorName": this.selectExpert.doctorName,
                "hospitalId": this.selectExpert.hospitalId,
                "isUsed": Number(this.inClassTime).toString(),
                "outUsed": Number(this.classTime).toString(),
                "remark": this.text_info,
                "term": this.term,
                timesList: timsList,
                typeList,
                type: 1,
                timeType: 2           //普通设置1，分时段设置2
            }
            if(params.timesList.length == 0) {
                this.$Message.error("请选择号源")
                return ""
            }
            if(!Boolean(params.doctorId)) {
                this.$Message.error("请选择医生!");
                return ""
            } else if (typeList.length <= 0) {
                this.$Message.error("请确认该医生权限配置或职称价格是否配置")
                return ''
            }
            this.submitLoading = true;
            console.log(JSON.stringify(params))
            this.$axios.post(api.insertScheduling, params).then(res => {
                console.log(res);
                if (res.data.code) {
                    this.submitLoading = false;
                    this.$Message.success(res.data.object.success);
                    this.back()
                } else {
                    this.submitLoading = false;
                    this.$Message.error("添加失败")
                }
            });          
        },
        // 选择专家
        expert(item) {
            this.modal1 = false;
            this.selectExpert = item;
            // 通过选择的医生加载医生服务列表
            this.$axios.post(api.schedulingMenuList, {
                doctorId: item.doctorId
            }).then(res => {
                if(res.data.success) {
                    let ret = res.data;
                    this.servericeList = ret.object;
                    this.servericeList.forEach(item => {                        
                        item.flag = false;
                    })
                    if(this.servericeList.length == 0) {
                        this.$Message.info('服务列表为空')
                    }
                } else {
                    this.$Message.error(ret.message)
                }
            })
        },
        // 获取医生权限管理
        searchExpert() {
            this.$axios
                .post(api.schedulingDoctorList, {
                    pageNo: this.expertNo,
                    pageSize: 10,
                    searchKey: this.searchName.trim(),
                    type: 1,
                    "areaCode": this.area,
                    "cityCode": this.city,
                    "hospitalId": this.hospital,
                    provinceCode : this.province
                })
                .then(res => {
                    if (res.data.code) {
                        let ret = res.data.object;
                        this.expertList = ret.records;
                        this.expertSize = ret.total;
                    } else {
                        this.$Message.error("加载医生权限管理失败")
                    }
                });
        },
        //切换排班模式
        changetimeType() {
          this.functionJS.queryNavgationTo(
            this,
            "/index/doctorOperation/InterScheduling/doctor/normaledit",
            {
              id: this.id,
              province: this.province,
              city: this.city,
              area: this.area,
              hospital: this.hospital,
              hospitalName: this.selectExpert.hospitalName,
              hospitalId: this.selectExpert.hospitalId,
              deptName: this.selectExpert.deptName,
              deptType: this.selectExpert.deptType,
              doctorName: this.selectExpert.doctorName,
              doctorId: this.selectExpert.doctorId,
              term: this.term,
              remarks: this.text_info,
              timeType: 1
            }
          );
        },
        //分时段开始
        closeTimePicker() {
          this.upList.map((el, i) => {
            el[8] = false;
          });
          this.dnList.map((el, i) => {
            el[8] = false;
          });
          this.$forceUpdate();
        },
        upAdItem() {
          let time = this.upList[this.upList.length - 1][0][1].toString();
          let status = time < "12:00"; //js 里面 date类型 11:00 比 12:00 大
          if (status) {
            let sliceh = parseInt(time.slice(0, 2));
            let afterh = sliceh + 1;
            let slicem = time.slice(3);
            slicem = afterh >= 12 ? "00" : slicem;
            afterh = afterh < 10 ? "0" + afterh : afterh > 12 ? "12" : afterh;
            let tmph = afterh + ":" + slicem;
            let tmpItem = [[time, tmph], null, null, null, null, null, null, null];
            this.upList.push(tmpItem);
          } else {
            this.infoMsg("上午的结束时间不能超过12:00,请先调整时间段时间再添加");
          }
        },
        dnAdItem() {
          let time = this.dnList[this.dnList.length - 1][0][1].toString();
          let status = time < "17:00"; //js 里面 date类型 11:00 比 12:00 大
          if (status) {
            let sliceh = parseInt(time.slice(0, 2));
            let afterh = sliceh + 1;
            let slicem = time.slice(3);
            slicem = afterh >= 17 ? "00" : slicem;
            afterh = afterh < 10 ? "0" + afterh : afterh > 17 ? "17" : afterh;
            let tmph = afterh + ":" + slicem;
            let tmpItem = [[time, tmph], null, null, null, null, null, null, null];
            this.dnList.push(tmpItem);
          } else {
            this.infoMsg("下午的结束时间不能超过17:00,请先调整时间段时间再添加");
          }
        },
        tnAdItem() {
          let time = this.tnList[this.tnList.length - 1][0][1].toString();
          let status = time < "17:00"; //js 里面 date类型 11:00 比 12:00 大
          if (status) {
            let sliceh = parseInt(time.slice(0, 2));
            let afterh = sliceh + 1;
            let slicem = time.slice(3);
            slicem = afterh >= 17 ? "00" : slicem;
            afterh = afterh < 10 ? "0" + afterh : afterh > 17 ? "17" : afterh;
            let tmph = afterh + ":" + slicem;
            let tmpItem = [[time, tmph], null, null, null, null, null, null, null];
            this.tnList.push(tmpItem);
          } else {
            this.infoMsg("晚上的结束时间不能超过21:00,请先调整时间段时间再添加");
          }
        },
        rmUpItem() {
          this.upList.pop();
        },
        rmDnItem() {
          this.dnList.pop();
        },
        rmTnItem() {
          this.tnList.pop();
        },
        backTime(minTime, maxTime, startTime, endTime) {
          let min = startTime,
            max = endTime;
          let tmpMinArr = minTime.split(":");
          let tmpMaxArr = maxTime.split(":");
          let tmpStartArr = startTime.split(":");
          if (min <= minTime) {
            min = minTime;
            if (max <= minTime) {
              tmpMinArr[1] = parseInt(tmpMinArr[1]) + 5;
              tmpMinArr[0] =
                tmpMinArr[1] > 55
                  ? parseInt(tmpMinArr[0]) + 1
                  : parseInt(tmpMinArr[0]);
              tmpMinArr[0] = tmpMinArr[0] < 10 ? "0" + tmpMinArr[0] : tmpMinArr[0];
              tmpMinArr[1] = tmpMinArr[1] > 55 ? 0 : tmpMinArr[1];
              tmpMinArr[1] = tmpMinArr[1] < 10 ? "0" + tmpMinArr[1] : tmpMinArr[1];
              max = tmpMinArr[0] + ":" + tmpMinArr[1];
            }
          }
          if (max >= maxTime) {
            max = maxTime;
            if (min >= maxTime) {
              tmpMaxArr[1] = parseInt(tmpMaxArr[1]) - 5;
              tmpMaxArr[0] =
                tmpMaxArr[1] < 0
                  ? parseInt(tmpMaxArr[0]) - 1
                  : parseInt(tmpMaxArr[0]);
              tmpMaxArr[0] = tmpMaxArr[0] < 10 ? "0" + tmpMaxArr[0] : tmpMaxArr[0];
              tmpMaxArr[1] = tmpMaxArr[1] < 0 ? 55 : tmpMaxArr[1];
              tmpMaxArr[1] = tmpMaxArr[1] < 10 ? "0" + tmpMaxArr[1] : tmpMaxArr[1];
              min = tmpMaxArr[0] + ":" + tmpMaxArr[1];
            }
          }
          if (min == max) {
            let minute1 = parseInt(tmpStartArr[1]) + 5;
            tmpStartArr[0] =
              minute1 > 55
                ? parseInt(tmpStartArr[0]) + 1
                : parseInt(tmpStartArr[0]);
            tmpStartArr[0] =
              tmpStartArr[0] < 10 ? "0" + tmpStartArr[0] : tmpStartArr[0];
            minute1 = minute1 < 10 ? "0" + minute1 : minute1 > 55 ? "00" : minute1;
            max = tmpStartArr[0] + ":" + minute1;
          }
          return [min, max];
        },
        changeUpTime(time, index) {
          if (index > 0) {
            //非第一行
            if (index < this.upList.length - 1) {
              //中间的
              let prev = this.upList[index - 1][0][1]; //最低时间
              let next = this.upList[index + 1][0][0]; //最高时间
              time = this.backTime(prev, next, time[0], time[1]);
            } else {
              //最后一行
              let prev = this.upList[index - 1][0][1]; //最小时间
              let next = "12:00";
              time = this.backTime(prev, next, time[0], time[1]);
            }
          } else {
            //第一行
            if (this.upList.length > 1) {
              //多行第一行
              let nextTime = this.upList[index + 1][0][0]; //最高时间
              let prev = "08:00";
              time = this.backTime(prev, nextTime, time[0], time[1]);
            } else {
              //就剩一行
              let prev = "08:00";
              let next = "12:00";
              time = this.backTime(prev, next, time[0], time[1]);
            }
          }
          this.upList[index][0] = time;
          this.$forceUpdate();
        },
        upClick(e, index) {
          e.stopPropagation();
          this.closeTimePicker();
          this.upList[index][8] = true;
          this.$forceUpdate();
        },
        upOk(index) {
          this.upList[index][8] = false;
          this.$forceUpdate();
        },
        changeDnTime(time, index) {
          if (index > 0) {
            //非第一行
            if (index < this.dnList.length - 1) {
              //中间的
              let prev = this.dnList[index - 1][0][1];
              let next = this.dnList[index + 1][0][0];
              time = this.backTime(prev, next, time[0], time[1]);
            } else {
              //最后一行
              let prev = this.dnList[index - 1][0][1];
              let next = "17:00";
              time = this.backTime(prev, next, time[0], time[1]);
            }
          } else {
            //第一行
            if (this.dnList.length > 1) {
              let prev = "13:00";
              let nextTime = this.dnList[index + 1][0][0];
              time = this.backTime(prev, nextTime, time[0], time[1]);
            } else {
              let prev = "13:00";
              let next = "17:00";
              time = this.backTime(prev, next, time[0], time[1]);
            }
          }
          this.dnList[index][0] = time;
          this.$forceUpdate();
        },
        dnClick(e, index) {
          e.stopPropagation();
          this.closeTimePicker();
          this.dnList[index][8] = true;
          this.$forceUpdate();
        },
        dnOk(index) {
          this.dnList[index][8] = false;
          this.$forceUpdate();
        },
        changeTnTime(time, index) {
          if (index > 0) {
            //非第一行
            if (index < this.tnList.length - 1) {
              //中间的
              let prev = this.tnList[index - 1][0][1];
              let next = this.tnList[index + 1][0][0];
              time = this.backTime(prev, next, time[0], time[1]);
            } else {
              //最后一行
              let prev = this.tnList[index - 1][0][1];
              let next = "21:00";
              time = this.backTime(prev, next, time[0], time[1]);
            }
          } else {
            //第一行
            if (this.tnList.length > 1) {
              let prev = "18:00";
              let nextTime = this.tnList[index + 1][0][0];
              time = this.backTime(prev, nextTime, time[0], time[1]);
            } else {
              let prev = "18:00";
              let next = "21:00";
              time = this.backTime(prev, next, time[0], time[1]);
            }
          }
          this.tnList[index][0] = time;
          this.$forceUpdate();
        },
        tnClick(e, index) {
          e.stopPropagation();
          this.closeTimePicker();
          this.tnList[index][8] = true;
          this.$forceUpdate();
        },
        tnOk(index) {
          this.tnList[index][8] = false;
          this.$forceUpdate();
        },
    },
    beforeDestroy() {
      window.document.body.removeEventListener("click", this.closeTimePicker);
    }
};
</script>
<style lang="less" scoped>
.edit {
    width: 100%;
    padding: 10px 0;
    margin: 0 auto;
    background: #fff;
    .main {
        width: 98%;
        display: flex;
        flex-direction: column;
        margin: 10px auto;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        margin-bottom: 20px;
        padding-bottom: 20px;
        .box{
            padding: 0 30px;
        }
        .title {
            font-size: 20px;
            padding-left: 15px;
            margin-bottom: 20px;
            color: #333;
            height: 40px;
            line-height: 40px;
            background: #ebedf8;         
        }
        .service{
            margin-top:20px;
            display:flex;
            flex-direction: row;
            align-items:center;
        }
        .doctor {
            width: 100%;
            display: flex;
            height: 40px;
            flex-direction: row;
            align-items: center;
            margin: 10px 0;
            span {
                margin-right: 20px;
                font-size: 20px;
            }
        }
        .item {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin: 10px 0;
            .item-text {
                display: flex;
                flex-direction: row;
                align-items: center;
                width: 100px;
            }
            .w-select {
                width: 150px;
            }
        }
        .table {
            width: 100%;
            display: flex;
            flex-direction: column;
            margin: 10px 0;
            p {
                text-align: center;
                margin: 10px 0;
            }
            table {
                width: 100%;
                border: 1px solid #ddd;
                tr:not(:first-child):hover {
                    background: #ebf7ff;
                }
                tr:first-child{
                    background: #f8f8f9;
                }
                tr {
                    
                    border-top: 1px solid #ddd;
                    height: 40px;
                    td {
                        text-align: center;
                    }
                    td.none {
                        display: none;
                    }
                }
            }
            .nodata {
                width: calc(100% - 1px);
                line-height: 40px;
                background: #fff;
                border: 1px solid #ddd;
                border-top: none;
                text-align: center;
            }
        }
        .text {
            width: 100%;
            display: flex;
            flex-direction: row;
            span {
                display: inline-block;
                width: 100px;
            }
        }
        .inputnum {
            width: 20%;
            margin-bottom: 10px;
            display: flex;
            flex-direction: row;
            span {
                display: inline-block;
                width: 100px;
            }
        }
        .paiban {
            width: 20%;
            margin: 15px 0;
            display: flex;
            flex-direction: row;
            span {
                display: inline-block;
                width: 100px;
            }
        }
    }
    .cus-btn {
        background-color: #5362e1;
        width: 25px;
        height: 25px;
        border-radius: 14px;
        color: #fff;
        border: none;
    }
    .save {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 200px;
        margin: 10px auto;
        justify-content: space-around;
    }
    .footer{
        display: flex;
        margin-bottom: 30px;
    }
}
.modelExpert {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .total {
        text-align: center;
        margin: 10px 0;
    }
    .modelExpert_list {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        cursor: pointer;
        span {
            width: 25%;
            text-align: center;
            user-select: none;
        }
    }
    .searchExpertList {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        // justify-content: space-between;
        margin-bottom: 20px;
        input {
            width: 80%;
            background: #fff;
            border: none;
            outline: none;
            text-indent: 10px;
            line-height: 30px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    }
}
</style>

